<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗店中学-历届领导</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="leader_bg">
        <!-- 顶部区域 start-->
        @@include('../_include/top.html',{"isOrange":"true","darkBlue":"false","leader":"active"})
        <!-- // 顶部区域  end-->
        <div class="wrap leader-box" id="wrap-box">
            <div class="inner animated fadeInRightBig">
                <h2><a href="leader-detail.html"><img src="images/leader-til.png" alt=""> </a></h2>
                <div class="leader-txt">
                    <img src="images/leader-des.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <audio id="audio">
        <source src="audio/waterdrop.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jquery.ripples-min.js"></script>
    <script>
        $(function () {

            let audio = document.querySelector('#audio');

            $('.wrap').click(function () {
                if (audio.paused) {
                    audio.play();
                }
            })

            // 设置涟漪效果
            $('.leader_bg').ripples({
                //imageUrl: null,   //要用作背景的图像的URL。如果没有，插件将尝试使用计算的background-imageCSS属性的值。也接受数据URI。
                dropRadius: 12, //通过在画布上单击或移动鼠标而产生的拖放的大小（以像素为单位）。
                perturbance: 0.01, //基本上由波纹引起的折射量。0表示没有折射。
                resolution: 900, //要呈现的WebGL纹理的宽度和高度。此值越大，渲染越平滑，涟漪传播越慢。
                // interactive: true,//鼠标点击和鼠标移动是否会触发效果。
                //crossOrigin: "",  //用于受影响图像的crossOrigin属性。
            });

            // Automatic drops
            // setInterval(function () {
            //     autoRipples()
            // }, 2000);

            //当前执行时间
            var nowTime = 0;
            //记录每次动画执行结束的时间
            var lastTime = Date.now(); 
            //我们自己定义的动画时间差值
            var diffTime = 2000;

            function autoRipples() {
                var $el = $('.leader_bg');
                var x = Math.random() * $el.outerWidth();
                var y = Math.random() * $el.outerHeight();
                var dropRadius = 20;
                var strength = 0.08 + Math.random() * 0.04;
                $el.ripples('drop', x, y, dropRadius, strength);
            }

            //requestAnimationFrame效果
            (function animloop() {
                //记录当前时间
                nowTime = Date.now()
                // 当前时间-上次执行时间如果大于diffTime，那么执行动画，并更新上次执行时间
                if (nowTime - lastTime > diffTime) {
                    lastTime = nowTime
                    autoRipples();
                }
                requestAnimationFrame(animloop);
            })();


        })
    </script>
</body>

</html>